<template>
<el-text class="mark" type="primary" @click="toVerify()">还未进行身份验证</el-text>
<div class="context_1">
  <div class="a">
    <div style="margin-left:10px"><el-text class="mx-1 tex" size="large">我的头像</el-text></div>
  </div>
  <div>
    <el-image class="b" style="width: 100px; height: 100px" :src="url" fit="fill" />
    <el-image class="b" style="width: 100px; height: 100px" :src="url" fit="fill" />
    <el-image class="b" style="width: 100px; height: 100px" :src="url" fit="fill" />
  </div>
</div>
<div class="context_2">
  <div class="a">
    <div>
      <el-text class="mx-1 tex" size="large" style="margin: 10px;">我的账号</el-text>
      <el-text class="mx-1" size="small">XDXD1564589</el-text>
    </div>
  </div>
  <div class="b">
    <div>
      <el-text class="mx-1" size="small" style="margin-left: 20px;margin-right:30px;">修改账号</el-text>
      <el-input v-model="account" style="width: 100px;height:15px"/>
    </div>
  </div>
</div>
<div class="context_3">
  <div class="a">
    <div>
      <el-text class="mx-1 tex" size="large" style="margin:10px;">我的昵称</el-text>
      <el-text class="mx-1" size="large">黄有为</el-text>
    </div>
  </div>
  <div class="b">
    <div>
      <el-text class="mx-1" size="small" style="margin-left: 20px;margin-right:30px;">修改昵称</el-text>
      <el-input v-model="name" style="width: 100px;height:15px"/>
    </div>
  </div>
</div>
<div class="context_4">
  <div class="a">
    <div>
      <el-text class="mx-1 tex" size="large" style="margin:10px;">我的简历</el-text>
    </div>
  </div>
   <div class="b">
    <div>
      <el-input
        v-model="textarea"
        style="width: 300px;margin:10px;"
        :autosize="{ minRows: 4, maxRows: 8 }"
        type="textarea"
        placeholder="Please input"
      />
    </div>
  </div>
</div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from "vue-router";
export default {
    setup() {
      let router = useRouter()
      let url = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      let account = ref("")
      let name = ref("")
      let textarea = ref("")
      function toVerify(){
        /* 跳转到验证界面 */
        router.push({name: "verfiy"})
      }
      return {url,account,name,textarea,toVerify}
    }
}
</script>

<style lang="less" scoped>
.context_1{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 10px;
  margin-top: 5px;
  .a{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  .b{
    margin: 10px;
  }
}
.context_2{
  margin-bottom: 10px;
  .a{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  .b{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
}
.context_3{
  margin-bottom: 10px;
  .a{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  .b{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
}
.context_4{
  margin-bottom: 10px;
  .a{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  .b{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
}
.tex{
  color: black;
  font-size: 25px;
  width: 100%;
}
.mark{
  font-size: 10px;
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>